<template>
    <div class="edu-page-warp">
        <condition-card @reset="reset" @search="search" label-width="110px">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item label="申请类型">
                        <el-select
                            clearable
                            v-model="queryForm.permitType"
                            style="width: 100%;"
                            filterable
                        >
                            <el-option
                                v-for="item in options.permitTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否启用">
                        <el-select
                            clearable
                            v-model="queryForm.isEnable"
                            style="width: 100%;"
                            filterable
                        >
                            <el-option
                                v-for="item in options.isEnables"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="开放开始时间">
                        <el-date-picker
                            clearable
                            v-model="queryForm.startTime"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            :placeholder="$t('message.plzSelect')"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="开放结束时间">
                        <el-date-picker
                            clearable
                            v-model="queryForm.endTime"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            :placeholder="$t('message.plzSelect')"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>
        <el-card shadow="never">
            <div class="edu-page-title">权限管理列表</div>
            <el-row>
                <el-col :span="12">
                    <div class="empty-box" />
                </el-col>
                <el-col :span="12">
                    <div class="float-right">
                        <el-button type="primary" @click="addConfig">{{$t("message.add")}}</el-button>
                    </div>
                </el-col>
            </el-row>
            <edu-table
                :data="configs"
                size="mini"
                style="width:100%"
                @page-change="handleCurrentChange"
                :total="queryForm.total_"
                :pageSize="queryForm.pageSize_"
                :pageNum="queryForm.pageNum_"
                :order="false"
                :selection="false"
            >
                <el-table-column label="申请类型" prop="permitTypeI18n">
                    <template slot-scope="scope">{{getPermitTypeI18n(scope.row)}}</template>
                </el-table-column>
                <el-table-column label="开放申请时间">
                    <template slot-scope="scope">
                        {{getFormatDate(scope.row.startTime)}}
                        <span>--</span>
                        {{getFormatDate(scope.row.endTime)}}
                    </template>
                </el-table-column>

                <el-table-column label="是否启用" prop="isEnableI18n" />
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editConfig(scope)">{{$t('message.edit')}}</el-button>
                        <el-button type="text" @click="deleteConfig(scope)">{{$t('message.delete')}}</el-button>
                    </template>
                </el-table-column>
            </edu-table>
        </el-card>
        <edu-dialog
            :title="configId?editTitle:addTitle"
            ref="configDialog"
            width="500px"
            @close="handleClose"
        >
            <el-form
                label-width="110px"
                label-suffix=":"
                :rules="rules"
                ref="configForm"
                :model="configForm"
            >
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="申请类型" prop="permitType">
                            <el-select
                                clearable
                                v-model="configForm.permitType"
                                style="width: 100%;"
                                filterable
                                multiple
                            >
                                <el-option
                                    v-for="item in options.permitTypes"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="开放开始时间" prop="startTime">
                            <el-date-picker
                                clearable
                                v-model="configForm.startTime"
                                value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd"
                                :placeholder="$t('message.plzSelect')"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="开放结束时间" prop="endTime">
                            <el-date-picker
                                clearable
                                v-model="configForm.endTime"
                                value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd"
                                :placeholder="$t('message.plzSelect')"
                                style="width: 100%"
                                @change="handleChangeEndTime"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="是否启用" prop="isEnable">
                            <el-select
                                clearable
                                v-model="configForm.isEnable"
                                style="width: 100%;"
                                filterable
                            >
                                <el-option
                                    v-for="item in options.isEnables"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template slot="buttons">
                <el-button @click="cancelDialog">{{$t("message.cancel")}}</el-button>
                <el-button @click="confirmDialog" type="primary">{{$t("message.confirm")}}</el-button>
            </template>
        </edu-dialog>
    </div>
</template>
<script>
import {
    getPermissionList,
    addPermission,
    updatePermission,
    deletePermission
} from "common/src/api/culture/change";
import { queryDic } from "common/src/api/dictionary";
import moment from "moment";
export default {
    name: "DoctorToMasterConfig",
    data: function() {
        return {
            queryForm: {
                permitType: null,
                isEnable: null,
                startTime: null,
                endTime: null,
                pageSize_: 20,
                pageNum_: 1,
                total_: 0
            },
            configs: null,
            configId: null,
            addTitle: "新增权限管理",
            editTitle: "编辑权限管理",
            configForm: {
                permitType: [],
                startTime: null,
                endTime: null,
                isEnable: 1
            },
            rules: {
                permitType: [
                    {
                        required: true,
                        message: "必须选择申请类型",
                        trigger: "change"
                    }
                ],
                startTime: [
                    {
                        required: true,
                        message: "必须填写开放开始日期",
                        trigger: "change"
                    },
                    { validator: this.validateTime, trigger: "change" }
                ],
                endTime: [
                    // {
                    //     required: true,
                    //     message: "必须填写开放结束日期",
                    //     trigger: "change"
                    // }
                ],
                isEnable: [
                    {
                        required: true,
                        message: "必须选择是否启用",
                        trigger: "change"
                    }
                ]
            },
            options: {
                isEnables: [],
                permitTypes: []
            }
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.options.isEnables.push({
                label: this.$t("message.yes"),
                value: 1
            });
            this.options.isEnables.push({
                label: this.$t("message.no"),
                value: 0
            });
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["K_YDSQLX"]
            };
            queryDic(data).then(res => {
                if (res.code === 200) {
                    this.fill("permitTypes", res.data.K_YDSQLX);
                }
            });
            this.onSubmit();
        },
        fill(type, data) {
            for (const key in data) {
                this.options[type].push({
                    value: key,
                    label: data[key]
                });
            }
        },
        reset() {
            this.queryForm.permitType = null;
            this.queryForm.isEnable = null;
            this.queryForm.startTime = null;
            this.queryForm.endTime = null;
            this.onSubmit();
        },
        onSubmit(isFirstPage = true) {
            if (isFirstPage) {
                this.queryForm.pageNum_ = 1;
            }
            getPermissionList(this.queryForm).then(res => {
                if (res.code == 200) {
                    res.data.list.forEach(row => {
                        row.startTime = moment(row.startTime).format(
                            "YYYY-MM-DD"
                        );
                        if (row.endTime) {
                            row.endTime = moment(row.endTime).format(
                                "YYYY-MM-DD"
                            );
                        }
                    });
                    this.configs = res.data.list;
                    this.queryForm.total_ = res.data.total_;
                }
            });
        },
        search() {
            if (
                this.queryForm.startTime &&
                this.queryForm.endTime &&
                this.queryForm.startTime > this.queryForm.endTime
            ) {
                this.$message({
                    type: "warning",
                    message: "开放开始时间不能晚于开放结束时间"
                });
                return;
            }
            this.onSubmit();
        },
        handleCurrentChange(val) {
            this.queryForm.pageSize_ = val.pageSize;
            this.queryForm.pageNum_ = val.pageNum;
            this.onSubmit(false);
        },
        handleClose() {
            this.configId = null;
            this.configForm.permitType = [];
            this.configForm.startTime = null;
            this.configForm.endTime = null;
            this.configForm.isEnable = 1;
        },
        addConfig() {
            this.$refs.configDialog.open();
            if (this.$refs.configForm) this.$refs.configForm.clearValidate();
        },
        editConfig(scope) {
            this.configId = scope.row.id;
            this.configForm.isEnable = scope.row.isEnable;
            this.configForm.startTime = scope.row.startTime;
            this.configForm.endTime = scope.row.endTime;
            this.configForm.permitType = scope.row.permitType.split(",");
            this.$refs.configDialog.open();
            if (this.$refs.configForm) this.$refs.configForm.clearValidate();
        },
        deleteConfig(scope) {
            this.$delConfirm().then(() => {
                deletePermission(scope.row.id).then(res => {
                    if (res.code == 200) {
                        this.cancelDialog();
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        });
                        this.onSubmit();
                    }
                });
            });
        },
        cancelDialog() {
            this.$refs.configDialog.close();
        },
        confirmDialog() {
            this.$refs.configForm.validate(valid => {
                if (!valid) {
                    return;
                }
                let param = _.cloneDeep(this.configForm);
                param.permitType = param.permitType.join(",");
                if (this.configId) {
                    param.id = this.configId;
                    updatePermission(param).then(res => {
                        if (res.code == 200) {
                            this.cancelDialog();
                            this.$message({
                                type: "success",
                                message: this.$t("message.saveSuccess")
                            });
                            this.onSubmit();
                        }
                    });
                } else {
                    addPermission(param).then(res => {
                        if (res.code == 200) {
                            this.cancelDialog();
                            this.$message({
                                type: "success",
                                message: this.$t("message.addSuccess")
                            });
                            this.onSubmit();
                        }
                    });
                }
            });
        },
        validateTime(rule, value, callback) {
            if (
                this.configForm.startTime &&
                this.configForm.endTime &&
                this.configForm.startTime > this.configForm.endTime
            ) {
                callback(new Error("开放开始时间不能晚于开放结束时间"));
            } else {
                callback();
            }
        },
        handleChangeEndTime() {
            this.$refs.configForm.validateField("startTime");
        },
        getFormatDate(date) {
            return date ? moment(date).format("YYYY.MM.DD") : null;
        },
        getPermitTypeI18n(row) {
            if (row.permitTypeI18n) {
                return row.permitTypeI18n;
            } else {
                let permitTypes = [];
                let types = row.permitType.split(",");
                this.options.permitTypes.forEach(p => {
                    if (types.includes(p.value)) {
                        permitTypes.push(p.label);
                    }
                });
                return permitTypes.join(",");
            }
        }
    }
};
</script>
